.detail {
  position: fixed;
  background-color: #ffffff;
  top: 0;
  height: 100vh;
  width: 200px;
  transition-property: right;
  transition-duration: 1s;
  width: 600px;
  overflow: auto;
}

.shown {
  right: 0;
}

.hidden {
  right: -100%;
}

.side-bar {
  background-color: #fafafa;
  height: calc(100vh - 56px);
  position: fixed;
  width: 240px;
}

.topics-tree {
  margin-top: 80px;
  background-color: #fafafa;
  max-height: calc(100vh - 136px);
  overflow: auto;
}

.learning-method {
  position: absolute;
  padding: 4px;
}

.learning-special {
  margin-top: 120px;
  max-height: calc(100vh - 176px);
}

.topics-header {
  position: absolute;
  top: 40px;
  padding: 4px;
}

.topics-header-special {
  top: 80px;
}